<template>
  <div class="app-container">
    <local-loading :loading="loading"></local-loading>
    <div class="search-container">
      <el-form :inline="true" label-position="left">
        <el-form-item :label="$t('studytask.Aufgabenstatus')">
          <el-select v-model="queryParams.status">
            <el-option
              v-for="dict in experiment_status_type"
              :key="dict.value"
              :label="
                translateTagDictI18n('experiment_status_type', dict.label)
              "
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('studytask.Einreichungsstatus')">
          <el-select v-model="queryParams.fileStatus">
            <el-option
              v-for="dict in experiment_submit_status"
              :key="dict.value"
              :label="
                translateTagDictI18n('experiment_submit_status', dict.label)
              "
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item prop="keywords" :label="$t('studytask.Aufgabenname')">
          <el-input
            v-model="queryParams.keywords"
            :placeholder="$t('studytask.Aufgabennamenein')"
            clearable
            @keyup.enter="handleQuery"
          />
        </el-form-item>

        <el-form-item>
          <el-button v-throttle="handleQuery" type="primary"
            ><el-icon style="margin-right: 5px; font-size: 18px"
              ><Search /></el-icon
            >{{ $t("studytask.Suche") }}</el-button
          >
        </el-form-item>

        <el-form-item>
          <el-button v-throttle="init" type="" plain
            ><el-icon style="margin-right: 5px; font-size: 18px">
              <Refresh /> </el-icon
            >{{ $t("studytask.Zurücksetzen") }}</el-button
          >
        </el-form-item>
      </el-form>
    </div>

    <el-row v-if="experimentList?.length != 0 && !loading" :gutter="30">
      <el-col
        v-for="(experiment, index) in experimentList"
        :key="index"
        :span="8"
        style="margin-top: 10px"
      >
        <el-card class="box-card" :body-style="{ padding: '0px' }">
          <template #header>
            <div class="card-header">
              <span style="font-size: 1.2rem"
                >{{ $t("studytask.Aufgabenname") }}:
                {{ experiment.experimentName }}</span
              >
            </div>
          </template>
          <template #default>
            <div class="text item">
              <p style="font-size: 1rem; padding: 0; margin: 10px 0 0 0">
                {{ $t("studytask.Startzeit") }}：{{ experiment.startTime }}
              </p>
              <p style="font-size: 1rem; padding: 0; margin: 10px 0 0 0">
                {{ $t("studytask.Kündigungszeit") }}：{{ experiment.endTime }}
              </p>
              <p style="font-size: 1rem; padding: 0; margin: 10px 0 0 0">
                {{ $t("studytask.ProfessorenundLehrer") }}：{{
                  experiment.teacher
                }}
              </p>
              <p style="font-size: 1rem; padding: 0; margin: 10px 0 0 0">
                {{ $t("studytask.Einreichungsstatus") }}：<el-tag
                  :type="
                    experiment.fileStatus == 0
                      ? 'info'
                      : experiment.fileStatus == 1
                      ? 'warning'
                      : experiment.fileStatus == 2
                      ? 'success'
                      : 'danger'
                  "
                  class="mx-1"
                  effect="dark"
                >
                  {{ experiment.fileStatusLabel }}
                </el-tag>
              </p>
              <p style="font-size: 1rem; padding: 0; margin: 10px 0 0 0">
                {{ $t("studytask.Aufgabenstatus") }}：<el-tag
                  :type="
                    experiment.status == 0
                      ? 'success'
                      : experiment.status == -1
                      ? 'info'
                      : experiment.status == 2
                      ? 'warning'
                      : 'danger'
                  "
                  class="mx-1"
                  effect="dark"
                >
                  {{ experiment.statusLabel }}
                </el-tag>
              </p>
            </div>

            <el-divider style="margin: 7px 0" />
            <div class="tj flex">
              <span style="font-size: 18px">
                <span v-if="experiment.grade && experiment.fileStatus === 2">
                  {{ $t("studytask.Bruch") }}：{{ experiment.grade }}
                </span>
              </span>
              <el-button
                v-throttle="() => submit(experiment.experimentId)"
                type="primary"
                ><el-icon style="margin-right: 5px"> <Promotion /> </el-icon
                >{{
                  experiment.status == 0
                    ? experiment.fileStatus === 1
                      ? $t("studytask.modifizieren")
                      : experiment.fileStatus === 2
                      ? $t("studytask.Prüfung")
                      : experiment.fileStatus === 3
                      ? $t("studytask.Wiedereinreichen")
                      : $t("studytask.Absenden")
                    : experiment.fileStatus === 3
                    ? $t("studytask.Wiedereinreichen")
                    : $t("studytask.Prüfung")
                }}</el-button
              >
            </div>
          </template>
        </el-card>
      </el-col>
      <!-- 分页 -->
    </el-row>
    <empty-state v-else :name="'暂无任务'"></empty-state>
    <pagination
      v-if="total > 0"
      v-model:total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="handleQuery"
    />
    <!-- 回到顶部 -->
    <back-top></back-top>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "Studytask",
  inheritAttrs: false,
});
import { getSubmitPage } from "@/api/submit";
import { StudyCourseExperimentVO, SubmitQuery } from "@/api/submit/types";
import { useRoute } from "vue-router";
import EmptyState from "@/components/EmptyState/index.vue";
import BackTop from "@/components/BackTop/index.vue";
import { translateTagDictI18n } from "@/utils/i18n";
import { useStudyStoreHook } from "@/store/modules/study";
import { useRouter } from "vue-router";

const router = useRouter();
const studyStore = useStudyStoreHook();
const courseId = ref(studyStore.courseId);
// 字典
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { experiment_status_type, experiment_submit_status } = proxy?.useDict(
  "experiment_status_type",
  "experiment_submit_status"
); // 状态信息
const route = useRoute();
const loading = ref(true);
const experimentList = ref<StudyCourseExperimentVO[]>();
const total = ref(0);
// 获取课程请求数据
const queryParams = reactive<SubmitQuery>({
  pageNum: 1,
  pageSize: 10,
  courseId: courseId,
});

// 查询函数
const handleQuery = () => {
  loading.value = true;
  // 请求任务列表
  getSubmitPage(queryParams)
    .then(({ data }) => {
     
      experimentList.value = data.list;
      total.value = data.total;
    })
    .finally(() => {
      loading.value = false;
    });
};

function submit(experimentId: number) {
  router.push({
    path: "/studyinfo/studysubmit",
    query: {
      experimentId,
    },
  });
}

// 重置函数
function init() {
  queryParams.keywords = "";
  queryParams.status = "" as unknown as number;
  queryParams.fileStatus = "" as unknown as number;
  ElMessage.success("重置成功");
  handleQuery();
}

// 监听当前路由的name变化
watch(
  () => router.currentRoute.value.name,
  (newRouterName: any, oldRouterName: any) => {
    if (oldRouterName === "Studysubmit" && newRouterName === "Studytask") {
      handleQuery();
    }
  },
  { immediate: true }
);

onMounted(() => {
  handleQuery();
});
</script>

<style scoped>
.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}

.tj {
  /* display: flex; */
  justify-content: space-between;
  padding: 0px 20px 10px 20px;
  width: 100%;
  /* text-align: right; */
  line-height: 32px;
  color: var(--el-color-primary);
  font-weight: bold;
  /* color: #808080; */
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bolder;
  padding: 0;
  margin: 0;
}

.text {
  padding: 0rem 20px;
  font-size: 14px;
}

.box-card {
  background: var(--el-bg-color-overlay);
}

:deep(el-card__header) {
  padding: 10px 20px;
}
</style>
